@extends('layouts.app')

@section('title', 'Append Record')

@section('css')
    <link href="{{url('/css/redactor.css')}}" rel="stylesheet">
@endsection

@section('content')
    <div class="container">
        <div class="col-lg-8 col-lg-offset-2" style="margin-top: 80px">
            @if (session('success'))
                <div class="alert alert-dismissible alert-success">
                    <button type="button" class="close" data-dismiss="alert">&times;</button>
                    <strong>Success</strong> {{session('success')}}
                </div>
            @endif
            @if (session('error'))
                <div class="alert alert-dismissible alert-danger">
                    <button type="button" class="close" data-dismiss="alert">&times;</button>
                    <strong>Error</strong> {{session('error')}}
                </div>
            @endif
            <form class="form-horizontal" action="{{url('/record/set')}}" method="post">
                <div class="h4">
                    <span class="glyphicon glyphicon-cog">@if (!empty($record)) Edit @else Append @endif Record</span>
                    <hr style="margin-top: 8px">
                </div>
                {{csrf_field()}}
                @if (!empty($record))
                    <div class="form-group">
                        <div class="col-lg-12">
                            <label for="id" class="">ID</label>
                            <input type="text" class="form-control" id="id" name="id" value="{{$record->id or 0}}"
                                   required>
                        </div>
                    </div>
                @endif
                <div class="form-group @if($errors->has('name')) has-error @endif">
                    <div class="col-lg-12">
                        <label for="name" class="">Name</label>
                        <input type="text" class="form-control" id="name" name="name" required
                               value="{{$record->name or ''}}">
                        @if($errors->has('name'))<span class="help-block"><strong>{{ $errors->first('name') }}</strong></span> @endif
                    </div>
                </div>
                <div class="form-group @if($errors->has('sex')) has-error @endif">
                    <div class="col-lg-12">
                        <label for="sex" class="">Sex</label>
                        <select type="text" class="form-control" id="sex" name="sex" required>
                            <option value="男" @if (!empty($record) && $record->sex == '男') selected @endif>男</option>
                            <option value="女" @if (!empty($record) && $record->sex == '女') selected @endif>女</option>
                        </select>
                        @if($errors->has('sex'))<span
                                class="help-block"><strong>{{ $errors->first('sex') }}</strong></span> @endif
                    </div>
                </div>
                <div class="form-group @if($errors->has('serial_number')) has-error @endif">
                    <div class="col-lg-12">
                        <label for="serial_number" class="">Serial Number</label>
                        <input type="text" class="form-control" id="serial_number" name="serial_number" required
                               value="{{$record->serial_number or ''}}">
                        @if($errors->has('serial_number'))<span
                                class="help-block"><strong>{{ $errors->first('serial_number') }}</strong></span> @endif
                    </div>
                </div>
                <div class="form-group @if($errors->has('common')) has-error @endif">
                    <div class="col-lg-12">
                        <label for="common" class="">Common</label>
                        <input class="form-control" id="common" name="common"
                               value="{{$record->common or ''}}">
                        @if($errors->has('common'))<span
                                class="help-block"><strong>{{ $errors->first('common') }}</strong></span> @endif
                    </div>
                </div>

                <div class="form-group @if($errors->has('date')) has-error @endif">
                    <div class="col-lg-12">
                        <label for="date" class="">Date</label>
                        <input class="form-control" id="date" name="date" type="date"
                               value="<?php echo e(isset($record->date) ? date('Y-m-d', strtotime($record->date)) : ''); ?>">
                        @if($errors->has('date'))<span
                                class="help-block"><strong>{{ $errors->first('date') }}</strong></span> @endif
                    </div>
                </div>
                <div class="form-group @if($errors->has('name')) has-error @endif">
                    <div class="col-lg-12" id="image"
                         style="border: 1px solid #ddd;min-height: 20px;padding: 0;margin: 10px 15px">
                        @if (!empty($record) && !empty($record->images))
                            <?php $index = 0 ?>
                            @foreach(json_decode($record->images) as $image)
                                <div class="dcu">
                                    <img src="{{url($image)}}" height="100%" class="img-rounded"
                                         style="min-width: 100px">
                                    <button class="btn btn-danger pcc" onclick="deleteMe(this)" type="button"><span
                                                class="glyphicon glyphicon-remove"></span></button>
                                    <input type="text" class="hidden" name="images[{{$index}}]" id="images"
                                           value="{{$image}}">
                                </div>
                                <?php $index++ ?>
                            @endforeach
                        @endif
                        <input class="form-control hidden" placeholder="Images" id="file" type="file"
                               data-count="{{$index or 0}}">
                    </div>
                    <div class="col-lg-12">
                        <button class="btn btn-warning btn-block" type="button" id="add_img">Add Image</button>
                        @if($errors->has('images'))<span
                                class="help-block"><strong>{{ $errors->first('images') }}</strong></span> @endif
                    </div>
                </div>

                <div class="form-group @if($errors->has('description')) has-error @endif">
                    <div class="col-lg-12">
                        <label for="description" class="">Description</label>
                        <textarea class="form-control" rows="3" id="description" name="description"
                                  style="max-width: 100%;min-width: 100%">{{$record->description or ''}}</textarea>
                        @if($errors->has('description'))
                            <span class="help-block"><strong>{{ $errors->first('description') }}</strong></span>
                        @endif
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-lg-12">
                        <div style="border: 1px solid #ddd;width: 100%;min-height: 20px">

                            <table class="table table-striped table-hover ">
                                <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Title</th>
                                    <th>Date</th>
                                    <th class="text-right">Action</th>
                                </tr>
                                </thead>
                                <tbody>
                                @if (!empty($record))
                                    @foreach($record->child()->get() as $item)
                                        <tr>
                                            <td><a href="{{url('/record/child/'.$item->id)}}"> {{$item->id}}</a></td>
                                            <td>{{$item->title}}</td>
                                            <td>{{$item->updated_at}}</td>
                                            <td class="text-right">
                                                <a class="btn btn-danger glyphicon glyphicon-minus-sign btn-sm"
                                                   onclick="deleteChild({{$item->id}})"> Delete</a>
                                                <a href="{{url('/record/child/edit?id='.$item->id)}}"
                                                   class="btn btn-primary glyphicon glyphicon-edit btn-sm"> Edit</a>
                                            </td>
                                        </tr>
                                    @endforeach
                                @endif
                                </tbody>
                            </table>
                        </div>
                    </div>
                    @if (!empty($record))
                        <div class="col-lg-12">
                            <button type="button" class="btn btn-danger btn-block" data-toggle="modal"
                                    data-target="#myModal">ADD RECORD CHILD
                            </button>
                        </div>
                    @endif
                </div>
                <div class="form-group">
                    <div class="col-lg-12">
                        <button type="submit" class="btn btn-success btn-block">Submit</button>
                    </div>
                </div>
            </form>

            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
                 aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                            <h4 class="modal-title" id="myModalLabel">Add Record Child</h4>
                        </div>
                        @if (!empty($record))
                            <form class="form-horizontal" method="post" action="{{url('/record/child/add')}}">
                                <div class="modal-body">
                                    {{csrf_field()}}
                                    <input type="hidden" name="id" value="{{$record->id}}">
                                    <div class="form-group has-success">
                                        <div class="col-lg-12">
                                            <label for="title" class="">Title</label>
                                            <input class="form-control" id="title" name="title" type="text" required>
                                        </div>
                                    </div>
                                    <div class="form-group has-success">
                                        <div class="col-lg-12">
                                            <label for="description_c" class="">Description</label>
                                            <textarea class="form-control" rows="5" id="description_c"
                                                      name="description"
                                                      style="max-width: 100%;min-width: 100%"></textarea>

                                        </div>
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                    <button type="submit" class="btn btn-primary">Submit</button>
                                </div>
                            </form>
                        @else
                            <div class="modal-body">Can`t Add Record Child</div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')
    <script src="{{url('/js/redactor.js')}}"></script>
    <script>
        $(document).ready(function () {
            $('textarea').redactor({
                lang: 'zh_cn',
                minHeight: 300,
                imageUpload: '/upload/img',
                plugins: ['fontcolor', 'fontsize', 'fullscreen', 'source', 'inlinestyle']
            });
            $('#add_img').click(function () {
                $('#file').click();
            });
            $('#file').change(function () {
                var file = $("#file").val();
                var strExtension = file.substr(file.lastIndexOf('.') + 1);
                if (strExtension !== 'jpg' && strExtension !== 'gif' && strExtension !== 'png' && strExtension !== 'bmp') {
                    alert("请选择图片文件");
                    return;
                }
                var formData = new FormData();
                formData.append("file", $("#file")[0].files[0]);
                formData.append("_token", $('meta[name="csrf-token"]').attr('content'));
                $.ajax({
                    type: "POST",
                    url: "/upload/image",
                    data: formData,
                    contentType: false,
                    processData: false,
                    success: function (data) {
                        var json = jQuery.parseJSON(data);
                        if (json.success === true) {
                            let index = parseInt($('#file').attr('data-count')) + 1;
                            $('#image').append(
                                '<div class="dcu">' +
                                '   <img src="' + json.data + '" height="100%" class="img-rounded">' +
                                '   <button class="btn btn-danger pcc" type="button" onclick="deleteMe(this)"><span class="glyphicon glyphicon-remove"></span></button>' +
                                '   <input type="text" class="hidden" name="images[' + index + ']" id="images" value="' + json.data + '">' +
                                '</div>'
                            );
                            $('#file').attr('data-count', index);
                        }

                    },
                    error: function () {
                        alert("上传失败，请检查网络后重试");
                    }
                });
            });
        });

        function deleteMe(el) {
            $(el).parent().remove();
        }

        function deleteChild(id) {
            $.post('/record/child/delete', {_token: $('meta[name="csrf-token"]').attr('content'), id: id}, function (data) {
                if (data === 'OK') {
                    window.location.reload();
                } else {
                    alert(data);
                }
            });
        }

    </script>
@endsection